<!DOCTYPE html>
<html lang="en" class="no-js">

	<head>
		<meta charset="utf-8" />
		<title>一只慢乌龟的TimeTown</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" href="/TYdeTimetown/images/title.ico"/>
		<link rel="stylesheet" href="css/time.css" />
		<link rel="stylesheet" href="css/menu_style.css" />
		<link rel="stylesheet" href="css/photo_list.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" href="css/motto.css" />
		<link rel="stylesheet" href="css/font_import.css" />
		<!--
        	作者：TY
        	时间：2018-05-30
        	描述：bootstrap插件
    	-->
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<!--end-->
		<script src="js/jquery.min.js"></script>
		<script src="js/modernizr.custom.js"></script>
		<style>
			.imgback {
				width: 100%;
				height: 100%;
				min-width: 100%;
				min-height: 100%;
				background-image: url(images/pic_28_meitu_12.jpg);
				background-size: cover;
			}
		</style>
	</head>

	<body>
		<div class="enlarged_img">
			<img class="enlarged_img_content" src="images/2.jpg" alt="img_enlarged"/>
		</div>
		<!--遮盖式菜单-->
		<div class="overlay overlay-hugeinc">
			<button type="button" class="overlay-close">Close</button>
			<nav>
				<ul>
					<li>
						<a href="index.html" target="_self">Home</a>
					</li>
					<li>
						<a href="timeline.html" target="_self">TimeLine</a>
					</li>
					<li>
						<a href="collection.html" target="_self">My Collection</a>
					</li>
					<li>
						<a href="about_me.html" target="_self">About Me</a>
					</li>
				</ul>
			</nav>
		</div>
		<!--end-->
		<header>
			<div class="for-sticky">
				<div class="logo">
					<a href="index.html"><img alt="logo" class="logo-nav" src="images/title_simple.png"></a>
				</div>
			</div>
			<button class="menu-button" id="open-button">
        		<span></span>
        		<span></span>
        		<span></span>
      		</button>
		</header>
		<section class="content">
			<div class="imgback">
				<div class="intro_timeline">
					<h2>ヽ(￣▽￣)ﾉ</h2>
					<br>
					<span id="typed"></span>
				</div>
			</div>
			<button class="go_down" onclick="clicktest()">SEE MORE</button>
		</section>
		<div class="part2_intro">
			<h3>
				<span>My Photos</span>
			</h3>
		</div>
		<section class="photos">
			<div class="container">
				<div class="row">
					<div class="col-md-10 col-md-offset-1">
						<ul class="photo_list">
							<li class="photo_item">
								<div>
									<img class="my_collection_photo" src="images/1.jpg" alt="img_collection"/>
									<h3>The Oceanside</h3>
								</div>
							</li>
							<li class="photo_item">
								<div>
									<img class="my_collection_photo" src="images/pic_10_meitu_8.jpg" alt="img_collection"/>
									<h3>Natural mountain deep</h3>
								</div>
							</li>
							<li class="photo_item">
								<div>
									<img class="my_collection_photo" src="images/pic_18_meitu_5.jpg" alt="img_collection"/>
									<h3>Arc de Triomphe</h3>
								</div>
							</li>
							<li class="photo_item">
								<div>
									<img class="my_collection_photo" src="images/5.jpg" alt="img_collection"/>
									<h3>Bridge and lake</h3>
								</div>
							</li>
							<li class="photo_item">
								<div>
									<img class="my_collection_photo" src="images/pic_3_meitu_4.jpg" alt="img_collection"/>
									<h3>The Seine river bank</h3>
								</div>
							</li>
							<li class="photo_item">
								<div>
									<img class="my_collection_photo" src="images/pic_1_meitu_9.jpg" alt="img_collection"/>
									<h3>White Church</h3>
								</div>
							</li>
							<li class="photo_item">
								<div>
									<img class="my_collection_photo" src="images/pic_12_meitu_7.jpg" alt="img_collection"/>
									<h3>Night of Venice</h3>
								</div>
							</li>
							<li class="photo_item">
								<div>
									<img class="my_collection_photo" src="images/pic_6_meitu_3.jpg" alt="img_collection"/>
									<h3>Champs-Elysées in the night</h3>
								</div>
							</li>
							<li class="photo_item">
								<div>
									<img class="my_collection_photo" src="images/4.jpg" alt="img_collection"/>
									<h3>Oversee the modern city</h3>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</section>
		<section class="motto">
			<div class="content-motto">
				<h3 class="words">
                       	Walk outside, and you will see the different color of the world~
                </h3>
				<p class="people">
					——T.Y.
				</p>
			</div>
			<div class="darken_background"></div>
		</section>
		<footer>
			<img src="images/logo_meitu_1.png" alt="myLogo" />
			<p class="footer_words">connect with me: 1234567890</p>
		</footer>

		<!--
        	作者：TY
        	时间：2018-05-30
        	描述：打印机效果
        -->
		<script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
		<script>
			var boxObj2 = document.getElementById('typed');
			new Typed(boxObj2, {
				strings: ['This is my collection', 'save precious time of trip'],
				typeSpeed: 100,
				startDelay: 200,
				loop: true,
				loopCount: Infinity
			});
		</script>
		<!--end-->
		<!--
        	作者：TY
        	时间：2018-05-31
        	描述：打开菜单
        -->
		<script src="js/classie.js"></script>
		<script src="js/menu.js"></script>

		<!--end-->
		<!--
        	作者：TY
        	时间：2018-06-01
        	描述：点击see more按钮的滑动效果
        -->
		<script>
			$(document).ready(function() {
				$(".go_down").click(function() {
					$("html, body").animate({
						scrollTop: $(".part2_intro").offset().top
					}, {
						duration: 500,
						easing: "swing"
					});
					return false;
				});
			})
		</script>
		<!--
        	作者：offline
        	时间：2018-06-04
        	描述：点击图片放大
        -->
		<script>
			$(document).ready(function() {
				$(".my_collection_photo").click(function() {
					var src = $(this).attr("src");
					if($(".enlarged_img").css("visibility") == "hidden") {
						setTimeout(function() {
							$(".enlarged_img_content").attr("src", src);
							$(".enlarged_img").css("visibility", "visible");
						}, 0);
					};
				});

				$(".enlarged_img").click(function() {
					if($(".enlarged_img").css("visibility") == "visible") {
						$(".enlarged_img").css("visibility", "hidden");
					}
				});
			});
		</script>
	</body>

</html>